import React, { Component } from 'react'

export default class App extends Component {
  a = 100;
  render() {
    return (
      <div>
        <input />
        {/* 写法一 */}
        <button onClick={() => {
          console.log("click", "如果内容逻辑过多，是不推荐这种写法的", this.a) // 箭头函数，this指向和render函数的一致，当然可以访问的到。
        }}>add1</button>
        {/* 写法二，使用bind修正this的指向,不推荐 */}
        <button onClick={this.handleClick.bind(this)}>add2</button>
        {/* 写法三，推荐使用 */}
        <button onClick={this.handleClick2}>add3</button>
        {/* 写法四 */}
        <button onClick={() => {
          // 匿名函数中写函数调用的方式
          this.handleClick3(11) // 比较推荐，执行匿名函数后调用方法，还可以传参数
        }}>add4</button>
      </div>
    )
  }
  /* hanleClck要是加上小括号，会发现还没有开始点击就会执行，同时再次点击就不会继续执行；这是因为自己执行后由于没有return任何值，所以其实函数体内部是一个
  undefine，这样他肯定不会再执行了，所以react和Vue是不同的。
  */



  handleClick() {
    console.log("click2", this)
  }

  handleClick2 = (evt) => {
    console.log("click2", evt)
  }

  handleClick3 = (a) => {
    console.log("Click3", a)
  }
}

/**
 * 修改this指向
 * call(修正this指向,并能自动执行);
 * apply(修正this指向，并能自动执行);
 * bind(修正this指向，手动执行);
 */

var obj1 = {
  name: "obj1",
  getName() {
    console.log(this.name)
  }
}

var obj2 = {
  name: "obj2",
  getName() {
    console.log(this.name)
  }
}

obj1.getName.bind(obj2)(); // 手动执行
obj2.getName();